<template>
	<view class="page">
		
		<view class="userBox Skeleton"  style="margin-top: 40rpx;">


		</view>
		<view class="tabBox">

		</view>
		<view class="masterpiece Skeleton" style="margin-top: 40rpx;">

		</view>
		<view class="infoBox Skeleton"  style="margin-top: 40rpx;">

		</view>
		<view style="height: 40rpx;" />
	</view>
</template>

<script>
	export default {
		name: "userBoxSkeleton",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iPhone X 及以上设备 */
		box-sizing: border-box;
	}


	.headerBox {
		height: 30%;
		position: relative;
	}



	.userBox {
		width: calc(100vw - 80rpx);
		margin-left: 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 10rpx 20rpx #eee;
		height: 440rpx;
		z-index: 3;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		




	}

	.tabBox {
		margin-top: -40rpx;
		padding: 0 40rpx;
	}

	.masterpiece {
		width: calc(100vw - 80rpx);
		margin-left: 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 10rpx 20rpx #eee;
		margin-top: 30rpx;
		padding: 20rpx;

		height: 30%;

	}

	.infoBox {
		width: calc(100vw - 80rpx);
		margin-left: 40rpx;
		border-radius: 16rpx;
		box-shadow: 0 10rpx 20rpx #eee;
		margin-top: 30rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		

		height: 30%;
	}

	.Skeleton {
		background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
		background-size: 400% 100%;
		border-radius: 3px;
		animation: loading 1.5s infinite;
	}

	@keyframes loading {
		/* 骨架屏的动画 */

		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}
</style>